<template>
	<view class="login">
		<view class="topbar">
			<text class="back" @tap="goback()"> < </text>
		</view>
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image src="../../../static/icons/user.jpg"></image>
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<view class="name">
					<input type="text" v-model="username" maxlength="11"></input>
				</view>
				<view class="psd">
					<input type="password" v-model="password" maxlength="11"></input>
				</view>
			</view>
			
			<button @tap="login">登录</button>
	
			<!-- 其他登录 -->
			<view class="other_login cuIcon">
				<view class="login_icon">
					<image src="../../../static/icons/QQ.png"></image>
				</view>
				<view class="login_icon">
					<image src="../../../static/icons/QQ.png"></image>
				</view>
				<view class="login_icon">
					<image src="../../../static/icons/QQ.png"></image>
				</view>
			</view>
	
			<!-- 底部信息 -->
			<view class="footer">
				<view @tap="modify">修改密码</view>
				<text>|</text>
				<view open-type="navigate">注册账号</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { doLogin } from "../../../api/login/login.js"
	export default {
		data() {
			return {
				username:'优乐美',
				password:123456,			
			};
		},
		onLoad(option) {
			// if(option){
			// 	this.username = option.username
			// 	this.password = option.password
			// }
			
		},
		methods:{
			modify(){
				var info = {
					username:'优乐美',
					password:123456
				}
				uni.navigateTo({
				    url: `/pages/mine/login/updatePwd?info=${JSON.stringify(info)}`
				});
			},
			goback(){
				uni.navigateBack({
				    delta: 1
				});
			},
			login(){
				doLogin({
					username:this.username,
					password:this.password
				})
				.then(res=>{
					// console.log(res.data.data)
					var userinfo = res.data.data
					if(res.data.code == 'S'){
						var data = {
								username:this.username,
								password:this.password,
								nickname:userinfo.nickname,
								tell:userinfo.tel,
								id:'bdecbb72264e4ec581061d4770a2e914'
							}
						uni.setStorageSync('userData',JSON.stringify(data))
						uni.switchTab({
						    url: '/pages/mine/mine'
						});
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login{
		.topbar{
			position: fixed;
			left: 0;
			top: 0;
			background-color: #354e44;
			color: #fff;
			width: 100%;
			height: 44px;
			line-height: 44px;
			text-align: center;
			z-index: 998;
			.back{
				font-size: 24px;
				position: absolute;
				left: 20px;
			}
		}
		.content{
			margin-top: 44px;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
			.header{
				width: 80px;
			    height: 80px;
			    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
			    border-radius: 50%;
			    background-color: #000000;
			    margin-top: 64px;
			    margin-bottom: 36px;
			    margin-left: auto;
			    margin-right: auto;
				image{
				    width: 80px;
				    height: 80px;
					display: inline-block;
					overflow: hidden;
					position: relative;
				    border-radius: 50%;
				}
			}
			.main{
			    display: flex;
			    flex-direction: column;
			    padding-left: 35px;
			    padding-right: 35px;
				view{
					border: none;
				    border-radius: 2.5rem;
				    box-shadow: 0 0 30px 0 rgba(43,86,112,.1);
				}
				.name,
				.psd{
					display: flex;
				    flex-direction: row;
				    justify-content: space-between;
				    align-items: center;
				    height: 18px;
				    color: #333333;
				    padding: 16px;
				    margin-top: 12px;
				    margin-bottom: 12px;
					input{
					    flex: 1;
					    text-align: left;
					    font-size: 14px;
					    padding-right: 5px;
					    margin-left: 10px;
						display: block;
					    font-size: 16px;
					    line-height: 1.4em;
					    height: 1.4em;
					    min-height: 1.4em;
					    overflow: hidden;
						color: #333333;
					}
				}
			}
			button{
			    background: rgb(53, 78, 68);
			    color: rgb(255, 255, 255);
				border-radius: 2.5rem;
				box-shadow: 0 0 30px 0 rgba(0,0,0,.2);
				transition: all 0.4s;
			    font-size: 15px;
			    width: 300px;
			    height: 50px;
			    line-height: 50px;
			    text-align: center;
			    margin-left: auto;
			    margin-right: auto;
			    margin-top: 48px;
			    overflow: hidden;
				position: relative;
				display: block;
			    padding-left: 14px;
			    padding-right: 14px;
			    box-sizing: border-box;
			}
			.other_login{
				display: flex;
			    flex-direction: row;
			    justify-content: center;
			    align-items: center;
			    margin-top: 78px;
			    text-align: center;
				.login_icon{
				    border: none;
				    width: 32px;
				    height: 32px;
				    font-size: 32px;
				    margin: 0 32px 0 32px;
				    color: rgba(0,0,0,0.7);
				    background-color: #fff;
				    border-radius: 16px;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.footer{
				display: flex;
			    flex-direction: row;
			    justify-content: center;
			    align-items: center;
			    font-size: 14px;
			    margin-top: 32px;
			    color: rgba(0,0,0,0.7);
			    text-align: center;
			    height: 20px;
			    line-height: 20px;
				navigator{
				    height: auto;
				    width: auto;
				    display: block;
				    cursor: pointer;
					font-size: 14px;
				    margin-top: 32px;
				    color: rgba(0,0,0,0.7);
				    text-align: center;
				    height: 20px;
				    line-height: 20px;
				}
				text{
				    font-size: 12px;
				    margin-left: 7px;
				    margin-right: 7px;
				    color: rgba(0,0,0,0.7);
				    text-align: center;
				    height: 20px;
				    line-height: 20px;
				}
			}
		}
	}
</style>